<template>
	<gui-page :customHeader="true" :headerClass="['gui-bg-gray', 'gui-dark-bg-level-1']">
		<!-- 自定义头部导航 -->
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading @goHome="goHome"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text class="gui-h5 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-primary-text">首页</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:120rpx;"></view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<!-- 页面主体 -->
		<template v-slot:gBody>
			<!-- 普通模式 -->
			<view class="gui-margin-top" style="z-index: 0;">
				<gui-swiper :swiperItems="swiperItems2" :width="750" :height="370" imgMode="scaleToFill" :spacing="0"
					:padding="0" borderRadius="0rpx"></gui-swiper>
			</view>
			<!--搜索框 -->
			<view class="sousuo">
				<view class="gui-bg-white gui-dark-bg-level-1 gui-padding gui-margin-top" style="border-radius: 20rpx;">
					<gui-search @inputting="inputting" @confirm="confirm"></gui-search>
					<!--分界线-->
					<view class="divider"></view>
					<!--日期-->
					<view class="gui-margin-top gui-flex gui-row gui-wrap gui-space-between">
						<view>
							<view class="gui-flex gui-row gui-wrap gui-space-between">
								<view style="" class="gui-padding-x">
									<text
										class="gui-text gui-block gui-secondary-text gui-text-left demo gui-bg-white gui-dark-bg-level-3 gui-text-small">入住时间</text>
								</view>
								<view style="" class="gui-padding-x">
									<text
										class="gui-text gui-block gui-secondary-text gui-text-left demo gui-bg-white gui-dark-bg-level-3 gui-text-small">离店时间</text>
								</view>
							</view>
							<view class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top gui-blod"
								style="margin-top: 10rpx;">
								<gui-datetime-between @confirm="confirm1" :startValue="startValue1"
									:endValue="endValue1" :isTime="false">
									<text class="demo gui-block gui-icons" style="margin-top: -35rpx;">
										{{endValue1 == ''?startValue1:startValue1+' - '+endValue1}}</text>
								</gui-datetime-between>
							</view>
						</view>
						<view>
							<view style="margin-top:35%" class="demo gui-block gui-dark-bg-level-3 gui-color-gray">

								<text style="color: green; margin-right: ; "
									class="gui-text gui-block gui-secondary-text gui-text-right demo gui-bg-white gui-dark-bg-level-3">共
									0 晚></text>
							</view>
						</view>
					</view>
					<!--分界线-->
					<view class="divider"></view>
					<view class="gui-margin-top gui-flex gui-row gui-wrap gui-space-between" style="margin-left: 40%;">
						<text class="demo gui-block gui-dark-bg-level-3 gui-color-gray">
							<text
								class="gui-block gui-secondary-text gui-text-left demo gui-bg-white gui-dark-bg-level-3 gui-text-small"
								style="color: blue;">1间 1宾客 1儿童</text>
						</text>
						<text class="demo gui-block gui-dark-bg-level-3 gui-color-gray">
							<text
								class="gui-block gui-secondary-text gui-text-left demo gui-bg-white gui-dark-bg-level-3 gui-text-small"
								style="color: blue;">酒店政策</text>
						</text>
					</view>
					<view class="demo" style="margin-top: 30rpx;">
						<button type="default" class="gui-button gui-gtbg-green gui-noborder">
							<text class="gui-color-white gui-button-text">搜索</text>
						</button>
					</view>
				</view>
			</view>
			<!--内容 -->
			<view class="gui-margin-top gui-padding-x gui-flex gui-row gui-wrap gui-space-between">
					<view 
					class="gui-product" 
					hover-class="gui-tap" 
					v-for="(item, index) in products" 
					:key="index" 
					@tap="gotoInfo(index, item)">
						<view>
							<gui-image 
							:src="item.img" 
							:width="330" 
							:height="330"></gui-image>
						</view>
						<view class="gui-product-lines">
							<text class="gui-product-name gui-primary-text">{{item.name}}</text>
						</view>
						<view class="gui-product-lines gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between">
							<view class="gui-product-lines gui-flex gui-row gui-nowrap gui-align-items-center">
								<text 
								class="gui-color-red gui-block gui-text-small">￥</text>
								<text 
								class="gui-h6 gui-block gui-color-red">{{item.price}}</text>
								<text
								class="gui-color-red gui-block gui-text-small">/起</text>
								<view style="margin-left:12rpx;">
									<text
									class="gui-text-small gui-block gui-color-gray gui-line-through">{{item.priceMarket}}</text>
								</view>
							</view>
							<text 
							class="gui-text-small gui-block" style="color: chartreuse;">特价</text>
						</view>
						<view style="height:30rpx;"></view>
					</view>
				</view>
		</template>
	</gui-page>
</template>
<script>
	export default {
		data() {
			return {
				swiperItems2: [],
				startValue1: "请选择往返时间",
				endValue1: "",
				products:[]
			}
		},
		methods: {
			goHome: function() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			// 监听输入
			inputting: function(e) {
				console.log(e);
			},
			// 监听提交
			confirm: function(e) {
				console.log(e);
			},
			// 监听点击
			tapme: function() {
				uni.showToast({
					title: "被点了...."
				});
			},
			confirm1: function(res) {
				this.startValue1 = res[0][1] + '月' + res[0][2] + '日';
				this.endValue1 = res[1][1] + '月' + res[1][2] + '日';
			},
	gotoInfo : function(idx, item){
				console.log('商品索引 : ' + idx);
				console.log('商品数据 : ');
				console.log(item);
			}
			
		},
		onLoad: function() {
			// 模拟api加载数据
			setTimeout(() => {
				this.swiperItems2 = [{
						img: './static/picture/a-1.jpg',
						url: '',
						title: "",
						opentype: 'click'
					},
					{
						img: './static/picture/a-2.jpg',
						url: '',
						title: "",
						opentype: 'click'
					},
					{
						img: './static/picture/a-3.jpg',
						url: '',
						title: "",
						opentype: 'click'
					}
				]
			})
					//加载产品数据
					uni.request({
								url  : 'https://www.graceui.com/api/products/lists',
								success : (res)=>{
									console.log(res);
									this.products = res.data.data;
								}
							})
		}
	}
</script>
<style scoped>
	.sousuo {
		margin-left: 8%;
		margin-right: 10%;
		z-index: 2;
		margin-top: -100rpx;
	}

	.divider {
		background: lightgrey;
		width: 100%;
		height: 2rpx;
		margin-top: 10rpx;
	}
	.gui-product{width:330rpx; overflow: hidden;}
	.gui-product-lines{margin-top:10rpx;}
	.gui-product-name{font-size:28rpx; line-height:32rpx;}
</style>